<template>
    <div class="address">
        <Header title="选择收获地址" isLeft=true></Header>
        <div class="city_search">
            <div class=search>
                <span class="city">
                    {{city}}
                    <i class="fa fa-caret-down"></i>
                </span>
                <i class="fa fa-search"></i>
                <input type="text" v-model="search_value" placeholder="小区/学校">
            </div>
            <Location :address="address"></Location>
        </div>
        
    </div>
</template>

<script>
    import Header from '../components/Header'
    import Location from '../components/Location';
    export default {
        name: 'address',
        components: {
            Header,
            Location,
        },
        data() {
            return {
                city: '陕西', //当前的城市
                search_value: ''
            };
        },
        beforeRouteEnter (to, from, next) {
            console.log(to);

            //放行路由
            //vm 表示的是当前组件
            next(vm=>{
                vm.city=to.params.city;
            });
        },
        computed:{
            address(){
                return this.$store.getters.location.formattedAddress;
            }
        }
    }
</script>

<style scoped>
    /* .address {
        width: 100%;
        height: 100%;
        overflow: auto;
        box-sizing: border-box;
        padding-top: 45px;
    } */
    .address{
        width:100%;
        height: 100%;
        overflow: auto;
        box-sizing: border-box;
        padding-top: 45px;
    }

    .city_search {
        background-color: #fff;
        padding: 10px 20px;
        color: #333;
    }

    .search {
        background-color: #eee;
        height: 40px;
        border-radius: 10px;
        box-sizing: border-box;
        line-height: 40px;
    }

    .search .city {
        padding: 0 10px;
    }

    .city i {
        margin-right: 10px;
    }

    .search input {
        margin-left: 5px;
        background-color: #eee;
        outline: none;
        border: none;
    }

    .area {
        margin-top: 16px;
        background: #fff;
    }

    .area li {
        border-bottom: 1px solid #eee;
        padding: 8px 16px;
        color: #aaa;
    }

    .area li h4 {
        font-weight: bold;
        color: #333;
        margin-bottom: 5px;
    }
</style>